<template>
	<div>
		<el-drawer title :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
			<div class="info-item">
				<el-descriptions title="基本信息" border :column="2">
					<el-descriptions-item label="ip地址">{{ objInfo.remoteAddr || "未知" }}</el-descriptions-item>
					<el-descriptions-item label="调用状态">
						<div class="dot" :class="{ success: objInfo.invokeStatus == '00' }"></div>
						{{ objInfo.invokeStatus == "00" ? "生效" : "异常" }}
					</el-descriptions-item>
					<el-descriptions-item label="调用时间">{{ objInfo.invokeTime || "未知" }}</el-descriptions-item>
					<el-descriptions-item label="耗时(毫秒)">{{ objInfo.elapsedTime }}</el-descriptions-item>
					<el-descriptions-item label="执行方法" :span="2">
						{{ objInfo.methodName || "未知" }}
						<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.methodName"></fortress-copy>
					</el-descriptions-item>
					<el-descriptions-item label="调用路径" :span="2">
						{{ objInfo.invokeUrl || "未知" }}
						<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.invokeUrl"></fortress-copy>
					</el-descriptions-item>
					<el-descriptions-item label="执行类">
						{{ objInfo.className || "未知" }}
						<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.className"></fortress-copy>
					</el-descriptions-item>
				</el-descriptions>

				<el-divider></el-divider>

				<el-descriptions title="接口信息"></el-descriptions>
				<el-collapse :value="[]">
					<el-collapse-item title="秘钥" name="3">
						{{ objInfo.secretId }}
						<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.secretId"></fortress-copy>
					</el-collapse-item>
					<el-collapse-item title="调用参数" name="1">
						<code>
							<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.invokeParams"></fortress-copy>
							<pre>{{ objInfo.invokeParams }}</pre>
						</code>
					</el-collapse-item>
					<el-collapse-item title="响应结果" name="2">
						<code>
							<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.resultData"></fortress-copy>
							<pre>{{ objInfo.resultData }}</pre>
						</code>
					</el-collapse-item>
				</el-collapse>
				<!-- <h5 class="from-title">基本信息</h5>
				<div class="form-item">
					<label class="form-item-label">ip地址:</label>
					<div class="form-item-content">{{ objInfo.remoteAddr }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">调用路径:</label>
					<div class="form-item-content">{{ objInfo.invokeUrl }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">调用参数:</label>
					<div class="form-item-content">{{ objInfo.invokeParams }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">执行类:</label>
					<div class="form-item-content">{{ objInfo.className }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">执行方法:</label>
					<div class="form-item-content">{{ objInfo.methodName }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">调用状态:</label>
					<div class="form-item-content">{{ objInfo.invokeStatus == "00" ? "成功" : "失败" }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">秘钥:</label>
					<div class="form-item-content">{{ objInfo.secretId }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">调用时间:</label>
					<div class="form-item-content">{{ objInfo.invokeTime }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">响应结果:</label>
					<div class="form-item-content">{{ objInfo.resultData }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">耗时(毫秒):</label>
					<div class="form-item-content">{{ objInfo.elapsedTime }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">创建时间:</label>
					<div class="form-item-content">{{ objInfo.createTime }}</div>
				</div> -->
			</div>
		</el-drawer>
	</div>
</template>
<script>
import { logopenapiInfo } from "@/api/log/logopenapi.js"

export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			objInfo: {},
		}
	},
	created() {},
	methods: {
		init(id) {
			if (id) {
				logopenapiInfo(id).then(res => {
					this.objInfo = res.data
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
	},
}
</script>
<style scoped>
.from-title {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	font-size: 16px;
	color: #17233d;
	border-bottom: 1px solid #eee;
}
.info-item {
	padding-inline: 35px;
	margin-bottom: 40px;
	.dot {
		--color: #ff0000;
		--dot-size: 8px;
		--modal-size: 2px;

		display: inline-block;
		vertical-align: middle;
		width: var(--dot-size);
		height: var(--dot-size);
		border-radius: 50%;
		background: var(--color);
		position: relative;
		&::before {
			content: "";
			position: absolute;
			border-radius: 50%;
			background: var(--color);
			opacity: 0.3;
			width: calc(var(--dot-size) + var(--modal-size) * 2);
			height: calc(var(--dot-size) + var(--modal-size) * 2);
			top: calc(var(--modal-size) * -1);
			left: calc(var(--modal-size) * -1);
		}
		&.success {
			--color: #00a841;
		}
	}
}

.form-item {
	margin-bottom: 20px;
	font-size: 14px;
}
.form-item-label {
	text-align: right;
	float: left;
	width: 25%;
}
.form-item-content {
	margin-left: 30%;
	width: 70%;
}
</style>
